<template>
	<view class="center">
		<view class="logo" @click="goLogin" :hover-class="!login ? 'logo-hover' : ''">
			<image class="logo-img" :src="avatarUrl"></image>
			<view class="logo-title">
				<text class="uer-name">Hi，{{login ? uerInfo.username : '您未登录'}}</text>
				
				<text class="go-login navigat-arrow" v-if="!login">&#xe65e;</text>
			</view>
		</view>
		
		<!-- progress -->
		<view class="logo logo-progress">
				<text style="color: #FFFFFF; display: block; width:40%;" >作业完成进度</text>
				<u-line-progress :percentage="30" activeColor="rgb(25,190,107)"></u-line-progress>

		</view>
		
		<view class="center-list">
			<view class="center-list-item ">
				<text class="list-icon">&#xe60f;</text>
				<text class="list-text" @click="toCount">帐号管理</text>
				<text class="navigat-arrow">&#xe65e;</text>
			</view>
			
		</view>
		
		<view class="center-list">
			<view class="center-list-item ">
				<text class="list-icon">&#xe60b;</text>
				<text class="list-text" @click="toHelp">帮助与反馈</text>
				<text class="navigat-arrow">&#xe65e;</text>
			</view>
			<view class="center-list-item">
				<text class="list-icon">&#xe65f;</text>
				<text class="list-text" @click="checkUpdate">检测更新</text>
				<text class="navigat-arrow">&#xe65e;</text>
			</view>
		</view>
		
		<view class="center-list" v-if="login">
			<view class="center-list-item" @click="modalShow=true">
				<text class="list-icon">&#xe614;</text>
				<text class="list-text">退出账户</text>
				<text class="navigat-arrow">&#xe65e;</text>
			</view>
			<u-modal :show="modalShow" :title="modalTitle" :content='modalContent' showCancelButton @confirm="toExit" @cancel="modalShow=false"></u-modal>
		</view>
		
	</view>
</template>

<script>
	import config from "../../util/config.js"
	export default {
		
		onShow(){
			console.log(this.$store.state.userdata)
			this.login = this.$store.state.logined;
			this.uerInfo = uni.getStorageSync("userdata").info
			console.log(this.uerInfo,this.login)
			
		},
		data() {
			return {
				login: false,
				avatarUrl: "../../static/images/logo.png",
				uerInfo: {},
				modalShow:false,
				modalTitle:"确认退出",
				modalContent:"你确定退出账号吗"
			}
		},
		methods: {
			checkUpdate(){
				uni.showLoading({
					title:"检查更新中"
				})
				var current_version = config.version
				console.log(config)
				this.Myrequest('update/',"GET",{user:this.$store.state.userdata.info.uid,version:current_version}).then((data)=>{
					console.log(data)
					if(data.code==200){
						uni.showModal({
							title:data.msg,
							content:data.detail,
							confirmText:"更新",
							cancelText:"暂不更新",
							success(res) {
								if(res.confirm){
									uni.downloadFile()
								}
							}
							
						})
					}
					uni.hideLoading()
				})
			},
			toHelp(){
				uni.navigateTo({
					url:"../help/help",
					animationType:"zoom-out"
				})
			},
			toExit(){
				this.modalShow = false
				this.login = false
				this.$store.commit('delete_userdata')
				uni.removeStorageSync('userdata')
				uni.$emit('logout',{})
				uni.reLaunch({
					url:'../login/login'
				})
			},
			toCount(){
				uni.navigateTo({
					url:"../account/account",
					fail(e) {
						console.log(e)
					}
				})
			},
			goLogin() {
				if (!this.login) {
					console.log("点击前往登录")
					uni.reLaunch({
						url:"../login/login"
					})
				}
			}
		}
	}
</script>

<style>
	@font-face {
		font-family: texticons;
		font-weight: normal;
		font-style: normal;
		src: url('https://at.alicdn.com/t/font_984210_5cs13ndgqsn.ttf') format('truetype');
	}

	page,
	view {
		display: flex;
	}

	page {
		background-color: #f8f8f8;
	}

	.center {
		flex-direction: column;
	}

	.logo {
		width: 750upx;
		height: 240upx;
		padding: 20upx;
		box-sizing: border-box;
		background: linear-gradient(to right,#22b1fd,#00cafc);
		flex-direction: row;
		align-items: center;
		flex-wrap: wrap;
	}
	.logo-progress{
		height: auto;
		margin-top: 20upx;
		border-radius: 20upx;
	}
	.logo-hover {
		opacity: 0.8;
	}

	.logo-img {
		width: 150upx;
		height: 150upx;
		border-radius: 150upx;
	}

	.logo-title {
		height: 150upx;
		flex: 1;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
		margin-left: 20upx;
	}

	.uer-name {
		height: 60upx;
		line-height: 60upx;
		font-size: 38upx;
		color: #FFFFFF;
	}

	.go-login.navigat-arrow {
		font-size: 38upx;
		color: #FFFFFF;
	}

	.login-title {
		height: 150upx;
		align-items: self-start;
		justify-content: center;
		flex-direction: column;
		margin-left: 20upx;
	}

	.center-list {
		background-color: #FFFFFF;
		margin-top: 20upx;
		width: 750upx;
		flex-direction: column;
	}

	.center-list-item {
		height: 90upx;
		width: 750upx;
		box-sizing: border-box;
		flex-direction: row;
		padding: 0upx 20upx;
	}

	.border-bottom {
		border-bottom-width: 0.2upx;
		border-color: #c8c7cc;
		border-bottom-style: solid;
	}

	.list-icon {
		width: 40upx;
		height: 90upx;
		line-height: 90upx;
		font-size: 34upx;
		color: #00cafc;
		text-align: center;
		font-family: texticons;
		margin-right: 20upx;
	}

	.list-text {
		height: 90upx;
		line-height: 90upx;
		font-size: 34upx;
		color: #555;
		flex: 1;
		text-align: left;
	}

	.navigat-arrow {
		height: 90upx;
		width: 40upx;
		line-height: 90upx;
		font-size: 34upx;
		color: #555;
		text-align: right;
		font-family: texticons;
	}
	.uid_number{
		font-size: 32upx;
	}
</style>